<%-- 
    Document   : Nava
    Created on : 21/04/2013, 01:42:54 PM
    Author     : ReN Fractal
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!-- Detecta tu localizaci��n y luego puedes buscar cualquier ubicaci��n -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> 
        <title>Localizador</title>
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
        <style>
            body, input{ font-family: 'Oswald', sans-serif; }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD-QpqLW0ewmEar3SpZRaMYCiQjt0Br_8Y&sensor=true"></script> 
        <script type="text/javascript">
            var geocoder;
            var map;
            var latitud;
            var longitud;
            var infowindow = new google.maps.InfoWindow();
  
            function initialize() {

                point();
//                latitud = '19.427015441594982';
//                longitud = '-99.1677474975586'; 
                loadMap();     
            }

            function loadMap() {
                geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(latitud, longitud);
                var mapOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }

                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                var myLatlng = new google.maps.LatLng(latitud, longitud);

                /*var coorMarcador = new google.maps.LatLng(latitud,longitud)*/

                var marcador = new google.maps.Marker({
                    position: myLatlng, 
                    map: map, 
                    title: "Mexico" 
                });
            }

            function point() {
                if (navigator.geolocation) { 
                    navigator.geolocation.getCurrentPosition(coordinates, errores);
                }else{
                    alert('Tu navegador no soporta geolocalizaci��n.');
                }
            }

            function coordinates(position) {
                latitud = position.coords.latitude; 
                longitud = position.coords.longitude; 
                loadMap();
            }

            function codeAddress() {
                var address = document.getElementById("address").value;
                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });
                        infowindow.setContent(document.getElementById("address").value);
                        infowindow.open(map, marker);
                    } else {
                        alert("Se presento un error con status: " + status);
                    }
                });
            }

            function errores(err) {
                if (err.code == 0) {
                    alert("Algo ha salido mal");
                }
                if (err.code == 1) {
                    alert("No has aceptado compartir tu posici��n");
                }
                if (err.code == 2) {
                    alert("No se puede obtener la posici��n actual");
                }
                if (err.code == 3) {
                    alert("Hemos superado el tiempo de espera");
                }
            }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width: 600px; height: 480px;"></div>
        <div>
            <input id="address" type="textbox" value="" style="width:400px;">
            <input type="button" value="Buscar" onclick="codeAddress()" style="width:100px;">
        </div>
    </body>
</html>
